<template>
    <div>
        <div ref="dargBoxRef" class="flex">
            <div class="labelIcon-primary margin-r-30px cursor" v-for="item, index in dargList" :data-id="item.value">{{
                item.label }}</div>
        </div>
    </div>
</template>
  
<script setup >
import Sortable from 'sortablejs';
import { onMounted, ref, nextTick } from 'vue';
const props = defineProps({
    dargList: { default: function () { return [] } },
    disabled: { default: false },
})
const dargBoxRef = ref('')
onMounted(() => {
    if (!props.disabled) { setTimeout(() => { initSortable() }, 200) }
})
const emit = defineEmits(['arrayChange'])
async function initSortable() {
    await nextTick()
    let sortableInit;
    // 拖动配置
    const config = {
        //动画效果持续时间（不设置或0都没有过渡效果）
        animation: 200,
        //禁用html5原生拖拽
        forceFallback: false,
        group: "name",
        // 拖动结束
        onEnd: function (evt) {
            // 获取拖动后的排序，arr数组里的值是 data-id 的顺序
            let arr = sortableInit.toArray();
            emit('arrayChange', arr)
        },
    };
    //初始化
    sortableInit = Sortable.create(dargBoxRef.value, config);
}

</script>
  
<style scoped lang="scss"></style>